<template>
  <div class="mokuai1">
    <h3>组件复用.这里就是index6为父组件，inde6zizujian为子组件。然后父传子props，传过去的是indexData</h3>

    <p>同一组件，第一部分内容</p>
    <!-- <index6zizujian :indexData="neirong1"></index6zizujian> -->
    <p>同一组件，第二部分内容</p>
    <!-- <index6zizujian :indexData="neirong2"></index6zizujian> -->
    <p>同一组件。传递propos可能是数字或者字符串</p>
    <!-- <index6zizujian :id="idchiald"></index6zizujian> -->
    <p>同一组件。传递propos必传，需求，当你有详情页，你需要id这个是必传的,注释上面的组件复用，因为上面的缺少xiangqing</p>
    <p>同一组件。传递propos的work是默认值，不传递时候就在子组件定义一个默认值，若是传值过去则显示传过去的值</p>
    <!-- <index6zizujian :xiangqingchiald="xiangqing"></index6zizujian>
    <index6zizujian :xiangqingchiald="xiangqing" work="das"></index6zizujian> -->
    <p>同一组件。传递propos的是数组或者对象，但是又要默认值，有报错没注释上面</p>
    <!-- <index6zizujian ></index6zizujian> -->
    <!-- <index6zizujian :xiangqingarr="xiangqingarr" @chilachang="chilachangclick"></index6zizujian> -->
    <!-- 进一步优化1，@update:chilachang这是子组件事件写法，上面是最开始用 chilachang监听，还需要写一个事件-->
     <!-- <index6zizujian :xiangqingarr="xiangqingarr" @update:chilachang="chilachangclick"></index6zizujian>  -->
     <!-- 通过官网解释再进行优化2, 还需要赋值操作，最好的使用第三种优化。.sync的语法糖-->
     <!-- <index6zizujian :xiangqingarr="xiangqingarr" @update:chilachang="data=>chilachangdata=data"></index6zizujian>  -->
      <!-- 通过官网解释.sync的语法糖再进行优化3,监听chilachang事件，然后他直接等于chilachangdata对象要接收的数据，优点在于他底下的事件已经没有用了。sync直接已经算是处理l -->
       <index6zizujian :xiangqingarr="xiangqingarr" :chilachang.sync="chilachangdata"></index6zizujian> 
    <h3>子传父使用$emit,子组件用chilachang事件名字传递过来，父组件要再写一个事件方法接收记得这个接收一定是在父组件上而不是任意一个标签能接收的</h3>
     <p>{{chilachangdata}}</p>
  </div>
</template>

<script>
import index6zizujian from "@/components/inde6zizujian.vue";
export default {
  // name: "index6",
  // 我同一个组件，但是内容不同，所以我只需要父传子，这样吧数据传过去，并不想再写一个组件
  data() {
    return {
      neirong1: ["内容1", "内容2", "内容3"],
      neirong2: ["内容4", "内容5", "内容6"],
      // 传给子组件可能是数字或者字符串都行,这个主要是在子组件中处理
      idchiald: 100,
      // 这个也是在子组件处理，这个必传，不然报错
      xiangqing: "山东黄金咖啡",
      // 传过去是数组，但是有时候有默认值
      xiangqingarr: ["哈哈", "哥哥", "水电费"],
      // 子组件过来的数据显示
      chilachangdata:"1111"
    };
  },
  components: {
    index6zizujian
  },
  methods:{
    // 记得写上参数，data或者别的都行，这只是代表接收子组件传过来的数据，当你想显示传过来的数据，那么你在data里面再写个数据，赋值给他就行
    chilachangclick(data){
      console.log(data)
      this.chilachangdata=data
    }
  }
};
</script>

<style>
.mokuai1 {
  border: 1px solid red;
  margin-bottom: 30px;
}
.colorred {
  color: red;
}
h2 {
  color: aqua;
}
h3 {
  color: brown;
}
</style>